<template>
  <view>
    <img :src="real_src" alt="">
  </view>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        default: ''
      }
    },

    data() {
      return {
        real_src: ''
      }
    },

    watch: {
      src: {
        immediate: true,
        handler(newVal, oldVal) {
          let that = this
          if (newVal) {
            console.log(newVal)
            /*uni.downloadFile({
              url: newVal, //仅为示例，并非真实的资源
              header: {Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*!/!*;q=0.8,application/signed-exchange;v=b3;q=0.9'},
              success: (res) => {
                console.log(res)
                if (res.statusCode === 200) {
                  console.log('下载成功');
                }
              }
            });*/

            uni.request({
              url: newVal, //获取图片的URL
              method: "get",
              header: {
                Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
                'content-type': ''
              },
              //responseType: 'arraybuffer',    //ArrayBuffer涉及面比较广，我的理解是ArrayBuffer代表内存之中的一段二进制数据，一旦生成不能再改。可以通过视图（TypedArray和DataView）进行操作。
              success(res) {
                console.log(res)
                let url = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data)
                //console.log(url)
                that.real_src = url
              },
              fail(res) {
                console.log('失败!')
              }
            })
          }
        }
      }
    }

  }
</script>

<style scoped>

</style>
